<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/common.js"></script>
    <style>
        .cname {
            background-image: url(img/comment.png);
            background-size: 15px 15px;
            background-position: 5px 4px;
            background-repeat: no-repeat;
            padding: 2px 2px 3px 20px;
            width: 100px
        }

        .submit {
            display: inline-block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            color: black;
            text-align: center;
            text-decoration: none;
            margin: 10px auto 0 auto;
            border: 2px solid black;

            /* 给颜色加上过渡效果 */
            transition: all 0.3s;
        }

        #c1 {
            margin: 10px auto 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #c2 {
            margin: 10px auto 0 auto;
            margin-left: 10px;
        }

        #comment-content {
            background: rgba(255, 255, 255, 0.7);
            border-style: none;
            outline-color: rgb(179, 210, 231);
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/log2.jpg" alt="">
        <a href="blog_list.html" class="title">博客系统主页</a>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="myblog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript: logout();">注销</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/doge.jpg" class="avtar" alt="">
                <h3 id="username"></h3>
                <a id="address">码云主页</a>
                <div class="counter">
                    <span>文章</span>
                    <span>总访问量</span>
                </div>
                <div class="counter">
                    <span id="artCount"></span>
                    <span id="totalrcount"></span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title"></h3>
                <!-- 博客时间 -->
                <div class="date">
                    发布时间：<span id="updatetime"> </span>&nbsp;&nbsp;
                    阅读量：<span id="rcount"></span>
                </div>
                <!-- 博客正文 -->
                <div id="editorDiv">

                </div>
                <!-- 评论区域 -->
                <form id="comment-form">
                    <h4>发表评论</h4>

                    <textarea id="comment-content" name="content" placeholder="请输入评论信息...." rows="4"
                        cols="50"></textarea>
                    <br>
                    <!-- 评论name -->
                    <input type="text" id="cname" class="cname">
                    <a href="javascript: putcomment();" class="submit">发布评论</a>
                </form>

                <hr>

                <!-- 评论列表 -->
                <div id="comment-list">

                </div>

            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript">
        var editormd;

        function initEdit(md) {
            editormd = editormd.markdownToHTML("editorDiv", {
                markdown: md, // Also, you can dynamic set Markdown text
                // htmlDecode : true,  // Enable / disable HTML tag encode.
                // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
            });
        }


        getUrlValue('id');

        //查询文章详情信息
        function getArtDetail(id) {
            //判断id是否正确
            if (id == "") {
                alert("非法传参");
                return;
            }
            jQuery.ajax({
                url: "/art/detail",
                type: 'post',
                data: { "id": id },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data != null) {
                        //正确获取到了文章
                        jQuery("#title").text(result.data.title);
                        jQuery('#updatetime').text(result.data.updatetime);
                        jQuery('#rcount').text(result.data.rcount);
                        initEdit(result.data.content);
                        //展示左侧用户信息
                        showUser(result.data.uid);
                    } else {
                        alert("抱歉,文章加载失败,请稍后再试!");
                        location.href = "/blog_list.html";
                    }
                }
            });
        }

        getArtDetail(getUrlValue('id'));

        //左侧显示作者信息
        function showUser(id) {
            jQuery.ajax({
                url: "/user/getuserbyid",
                type: 'post',
                data: { "id": id },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data.id > 0) {
                        jQuery("#username").text(result.data.nickname);
                        jQuery("#artCount").text(result.data.artCount);
                        jQuery('#address').attr('href', result.data.gitaddress);
                        jQuery('#totalrcount').text(result.data.totalrcount);
                    } else {
                        alert("抱歉:作者信息加载失败,请稍后再试!")
                    }
                }
            });
        }

        //阅读量 增加
        function incrRCount() {
            //得到文章Id
            var id = getUrlValue("id");
            if (id != "") {
                jQuery.ajax({
                    url: "/art/incr-rcoun",
                    type: "post",
                    data: { "id": id },
                    success: function (result) {

                    }
                });
            }
        }

        incrRCount();

        var cname;
        var aid = getUrlValue('id');
        /**
         * 提交评论功能
         */
        function putcomment() {
            var commentcontent = jQuery("#comment-content");
            //判断评论是不是空
            if (commentcontent.val() == '') {
                alert("评论不能为空!");
                // commentcontent.focus();
                return;
            }
            //获取到对应的文章ID和发表评论的用户名
            //文章id
            if (aid == '') {
                alert("抱歉: 发表评论失败,请稍后再试!");
                return;
            }
            //发表评论的用户名
            cname = jQuery('.cname');
            if (cname.val() == '') {
                alert("请输入名字!");
                // cname.focus();
                return;
            }
            jQuery.ajax({
                url: '/comment/putcomment',
                type: 'post',
                data: { "aid": aid, "cname": cname.val(), "commentinfo": commentcontent.val() },
                success: function (result) {
                    if (result != null && result.code == 200) {
                        alert("发布成功");
                        location.href = location.href;
                    } else {
                        alert("抱歉: 发表评论失败,请稍后再试!")
                    }
                }
            });
        }

        /**
         * 获取评论功能
         * 打开博客详情自动读取评论
         */
        function getcomment() {
            jQuery.ajax({
                url: '/comment/getcomment',
                type: 'post',
                data: { "aid": aid },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data.length >= 0) {
                        //两种情况,一种是发表了文章,一种是没有发表文章
                        var commentlist = "";
                        for (var i = 0; i < result.data.length; i++) {
                            var comments = result.data[i];
                            commentlist += '<div id="c1">' + '用户：' + comments.cname + '        ' + '发布时间：' + comments.createtime;
                            commentlist += '<div id= "c2">' + '评论说：' + comments.commentinfo + '</div>';
                            commentlist += '</div>';
                        }
                        jQuery('#comment-list').html(commentlist);
                    }
                }
            });
        }
        getcomment();

    </script>
</body>

</html>